<!-- 示例7: 带插图的空状态 -->
<template>
  <div class="table-container">
    <!-- 添加一个包装容器 -->
    <div class="header">
      <div class="title">客户管理</div>
      <button @click="createProject2">添加数据</button>
    </div>
    <Table
        :data="customers"
        :columns="columns"
        :show-search="true"
        :virtualScroll="true"
        stripe
        border
        size="small"
    >
      <template #empty>
        <div class="illustration-empty">
          <img src="/image/error_404.png" alt="无数据">
          <h3>空空如也</h3>
          <p>点击右上角按钮添加第一条记录</p>
        </div>
      </template>
    </Table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟客户数据
const customers = ref([])

// 列配置
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '城市', dataIndex: 'city' },
  { title: '会员等级', dataIndex: 'level' },
  { title: '积分', dataIndex: 'points' },
  { title: '最近访问', dataIndex: 'lastVisit' }
]

// 随机生成城市
const cities = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安', '南京', '重庆']
// 会员等级
const levels = ['普通', '白银', '黄金', '铂金', '钻石']
// 随机姓氏
const firstNames = ['张', '李', '王', '赵', '钱', '孙', '周', '吴', '郑', '陈']
// 随机名字
const lastNames = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '洋']

// 创建项目方法
const createProject2 = () => {
  // 生成新的客户数据
  const newCustomer = {
    id: customers.value.length + 1,
    name: firstNames[Math.floor(Math.random() * firstNames.length)] + 
          lastNames[Math.floor(Math.random() * lastNames.length)],
    age: Math.floor(Math.random() * 30) + 20, // 20-50岁
    city: cities[Math.floor(Math.random() * cities.length)],
    level: levels[Math.floor(Math.random() * levels.length)],
    points: Math.floor(Math.random() * 5000) + 1000, // 1000-6000积分
    lastVisit: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000)
      .toISOString()
      .split('T')[0] // 最近30天内的随机日期
  }

  // 添加到客户列表
  customers.value.push(newCustomer)
}
</script>

<style scoped>
/* 添加容器样式 */
.table-container {
  padding: 20px;
  position: relative;
}

/* 添加头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

/* 按钮样式 */
button {
  padding: 8px 16px;
  background: var(--empty-action-color, #409eff);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

button:hover {
  opacity: 0.8;
}

/* 可定制的CSS变量 */
.ds-table {
  --empty-text-color: #909399;
  --empty-icon-color: #c0c4cc;
  --empty-action-color: #409eff;
}

.illustration-empty {
  text-align: center;
  padding: 30px 0;
}

.illustration-empty img {
  width: 200px;
  margin-bottom: 16px;
}

.illustration-empty h3 {
  color: #909399;
  font-size: 18px;
  margin-bottom: 8px;
}

.illustration-empty p {
  color: #c0c4cc;
  font-size: 14px;
}
</style>